<template>
  <eip-modal :visible="visible" :title="title" @close="cancel" :width="1100">
    <template slot="body">
      <div class="padding-top-xs">
        <vxe-table
          ref="table"
          id="recycle"
          :tree-config="{
            expandAll: true,
            transform: true,
            rowField: 'key',
            parentField: 'pid',
            trigger: 'row',
          }"
          height="600px"
          :data="columns"
        >
          <template #empty>
            <eip-empty />
          </template>
          <vxe-column type="seq" title="序号" width="60"></vxe-column>
          <vxe-column type="checkbox" width="40" align="center" fixed="left">
            <template #header="{ checked, indeterminate }">
              <span @click.stop="$refs.table.toggleAllCheckboxRow()">
                <a-checkbox :indeterminate="indeterminate" :checked="checked">
                </a-checkbox>
              </span>
            </template>
            <template #checkbox="{ row, checked, indeterminate }">
              <span @click.stop="$refs.table.toggleCheckboxRow(row)">
                <a-checkbox :indeterminate="indeterminate" :checked="checked">
                </a-checkbox>
              </span>
            </template>
          </vxe-column>
          <vxe-column title="创建时间" min-width="140" showOverflow="ellipsis">
            <template #default="{ row }">
              {{ createTimeFormat(row.key) }}
            </template>
          </vxe-column>
          <vxe-column title="删除时间" min-width="140" showOverflow="ellipsis">
            <template #default="{ row }">
              {{ convertTimestamp(row.deleteTime) }}
            </template>
          </vxe-column>
          <vxe-column
            field="label"
            title="字段名称"
            min-width="140"
            showOverflow="ellipsis"
          >
          </vxe-column>
          <vxe-column
            field="id"
            title="类型"
            width="120"
            showOverflow="ellipsis"
          >
            <template #default="{ row }">
              {{ row.type }}
            </template>
          </vxe-column>
          <!-- <vxe-column
            field="key"
            title="字段ID"
            min-width="200"
            showOverflow="ellipsis"
          >
            <template #default="{ row }">
              {{ row.key }}
              <a-tooltip title="复制">
                <a-icon type="copy" @click="copyValue(row.key)"></a-icon>
              </a-tooltip>
            </template>
          </vxe-column> -->
          <vxe-column
            field="model"
            title="字段ID"
            min-width="200"
            showOverflow="ellipsis"
          >
          </vxe-column>
          <vxe-column
            title="操作"
            width="100"
            align="center"
            showOverflow="ellipsis"
          >
            <template #default="{ row }">
              <a-popconfirm
                :title="'确定删除字段:' + row.label + '删除后相关数据不可恢复'"
                ok-text="是"
                cancel-text="否"
                @confirm="del(row)"
              >
                <label class="text-red eip-cursor-pointer">删除</label>
              </a-popconfirm>
            </template>
          </vxe-column>
        </vxe-table>
      </div>
    </template>
    <template slot="footer">
      <div class="flex justify-between align-center">
        <div></div>

        <a-space>
          <a-button @click="cancel"><a-icon type="close" />关闭</a-button>
          <a-button key="submit" @click="save" type="primary" :loading="loading"
            ><a-icon type="save" />恢复字段</a-button
          >
        </a-space>
      </div>
    </template>
  </eip-modal>
</template>

<script>
import { tableFieldDelete } from "@/services/system/zerocode/worksheet/designer";
import { VxeUI } from "vxe-pc-ui";
import moment from "moment";
import { selectTableRow, deleteConfirm } from "@/utils/util";
export default {
  name: "aliasSetting",
  data() {
    return {
      loading: false,
      columns: [],
    };
  },

  props: {
    visible: {
      type: Boolean,
      default: false,
    },

    title: {
      type: String,
    },
    zeroCodeId: String,
  },
  created() {
    this.columns = this.eipFormDesigner.kfd.getValue().recycle;
  },
  methods: {
    /**
     * 取消
     */
    cancel() {
      this.$emit("update:visible", false);
    },
    /**
     * 保存字段和表别名
     */
    save() {
      //已勾选
      let that = this;
      selectTableRow(
        that.$refs.table,
        function (rows) {
          //提示是否删除
          deleteConfirm(
            "确定恢复选中字段",
            function () {
              //加载提示
              rows.forEach((item) => {
                that.eipFormDesigner.kfd.recycleRestore(item);
              });
            },
            that
          );
        },
        that,
        false
      );
    },
    del(item) {
      let that = this;
      var find = that.$utils.find(that.columns, (f) => f.key == item.key);
      if (find) {
        that.$loading.show({ text: "删除中..." });
        tableFieldDelete({
          zeroCodeId: this.zeroCodeId,
          columns: item.key,
        }).then((result) => {
          that.$loading.hide();
          if (result.code === that.eipResultCode.success) {
            that.$message.success(result.msg);
            that.$utils.remove(that.columns, (f) => f.key == item.key);
            that.$emit("save", result);
          } else {
            that.$message.error(result.msg);
          }
        });
      }
    },
    /**
     * 格式化开始时间
     */
    createTimeFormat(datetime) {
      var timestamp = datetime.split("_")[1];
      return this.convertTimestamp(timestamp);
    },
    /**
     * 格式化开始时间
     */
    convertTimestamp(timestamp) {
      const date = new Date(parseInt(timestamp));
      var format = moment(date).format("YYYY-MM-DD HH:mm:ss");
      return format;
    },
    /**
     * 复制值
     * @param key
     */
    copyValue(value) {
      if (VxeUI.clipboard.copy(value)) {
        this.$message.success("复制成功");
      } else {
        this.$message.error("复制失败");
      }
    },
  },
};
</script>
